<template>
	<!-- 我的-我的服务-积分商城-积分明细-已消耗 -->
	<view class="consumed">
		<view class="main">
			<view class="main-item flexjcsb" v-for="item in arr" :key="item.id">
				<view class="">
					<view class="main-item-title">
						{{item.type_name}}
					</view>
					<view class="main-item-OrderNo">
						{{item.remark}}
					</view>
				</view>
				<view class="">
					<view class="main-item-NumberOfPoints">
						{{item.account_data}}
					</view>
					<view class="main-item-dateTrim">
						<text>{{item.create_time | dateTime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['arr'],
		data() {
			return {

			}
		},
		filters: {
			dateTime(timestamp) {
				const date = new Date(timestamp * 1000)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hours = date.getHours()
				const minutes = date.getMinutes()
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`
				return formattedTime
			}
		}
	}
</script>

<style lang="less" scoped>
	.consumed {
		.main {
			.main-item {
				height: 144rpx;
				background: #FFFFFF;

				// 每条数据的标题
				.main-item-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					padding-bottom: 22rpx;
				}

				// 订单号
				.main-item-OrderNo {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 40rpx;
				}

				// 积分数
				.main-item-NumberOfPoints {
					text-align: right;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F14500;
					line-height: 40rpx;
					padding-bottom: 24rpx;
				}

				// 日期时间
				.main-item-dateTrim {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 40rpx;
					// text:first-child {
					// 	padding-right: 20rpx;
					// }
				}
			}
		}
	}
</style>